<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission Example</title>
<style>
    .hidden {
        display: none;
    }
</style>
</head>
<body>

<form id="myForm">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>
    <button type="submit">Submit</button>
</form>

<div id="successMessage" class="hidden">
    <p>Form submitted successfully!</p>
</div>

<script>
    const form = document.getElementById('myForm');
    const successMessage = document.getElementById('successMessage');

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the form from submitting

        // Here you can add your form submission logic
        // For demonstration, let's just show the success message

        // Display the success message
        successMessage.classList.remove('hidden');
    });
</script>

</body>
</html>
